<template>
  <view>
    <view class="u-p-24">
      <view class="gap-24">
        <status title="配送中" sub="距离500m" bg="#5a9eff"></status>
      </view>
      
      <view class="gap-24">
        <view class="peisong-card">
          <view class="u-font-28">配送信息</view>
          <view class="flex-row justify-between u-font-24">
            <view style="color: #C3C3C3">配送服务</view>
            <view>奇呱专送</view>
          </view>
          <view class="flex-row justify-between u-font-24">
            <view style="color: #C3C3C3">配送骑手</view>
            <view>王虎</view>
          </view>
          <view class="f-center">联系骑手</view>
        </view>
      </view>
      
      <view class="gap-24">
        <view class="hexiao-card">
          <view class="u-font-28">核销码</view>
          <view style="color: #FFBB59;font-size: 18rpx;">*由于订单金额超过500元,为了你的财产安全请在确认收货后将此码告知骑手*</view>
          <view class="f-center u-font-48" style="height: 80rpx;background: #EFEFEF;border-radius: 4rpx;">AK47M162</view>
        </view>
      </view>

      <view class="order-card">
        <view class="top">
          <u-avatar src="https://picsum.photos/id/409/200/200" mode="square" size="72"></u-avatar>
          <view class="name u-line-1">欧斯u地方</view>
          <uni-icons type="arrowright"></uni-icons>
        </view>

        <view class="items">
          <view class="item" v-for="i in 3" :key="i">
            <image class="pic" src="https://picsum.photos/id/409/200/200"></image>
            <view class="info">
              <view class="name u-line-1">美特斯邦威夹克</view>
              <view class="price u-line-1">x1</view>
            </view>
          </view>
        </view>

        <view class="info">
          <view class="row">
            <view class="left">商品总价</view>
            <view class="right">¥48.0</view>
          </view>
          <view class="row">
            <view class="left">商品总价</view>
            <view class="right">¥48.0</view>
          </view>
          <u-gap height="8"></u-gap>
          <view class="row">
            <view class="left">商品总价</view>
            <view class="right on">¥48.0</view>
          </view>
          <view class="row">
            <view class="left">优惠券</view>
            <view class="right on">
              <text>-¥48.0</text>
              <uni-icons type="arrowright" size="12" color="#FF511B"></uni-icons>
            </view>
          </view>
          <u-gap height="16"></u-gap>
          <view class="row">
            <view class="left text-black">需付款</view>
            <view class="right on">¥48.0</view>
          </view>
        </view>
      </view>

      <view class="info-card">
        <view class="row">
          <view class="left">订单编号: </view>
          <view class="right text-black">2019111111110123</view>
        </view>
        <view class="row">
          <view class="left">下单时间:</view>
          <view class="right text-black">2019-11-11 11:11</view>
        </view>
        <view class="row">
          <view class="left">支付方式: </view>
          <view class="right text-black">在线支付</view>
        </view>
        <view class="row">
          <view class="left">订单编号: </view>
          <view class="right text-black">2019111111110123</view>
        </view>
        <view class="row">
          <view class="left">下单时间:</view>
          <view class="right text-black">2019-11-11 11:11</view>
        </view>
        <view class="row">
          <view class="left">支付方式: </view>
          <view class="right text-black">在线支付</view>
        </view>
      </view>

      <view class="flex-row justify-between pay-btns">
        <view class="left">
          <view>优惠:21元</view>
          <view>合计:<text class="lg">￥138</text></view>
        </view>
        <view class="right">立即付款</view>
      </view>

      <view class="btns flex-row justify-between">
        <my-btn :size="[340, 80, 30]" bg="#3F3F3F" color="#fff" inline round>联系商家</my-btn>
        <my-btn :size="[340, 80, 30]" bg="linear-gradient(90deg, #ff842b 0%,#ff5f34 100% )" color="#fff" inline round>联系商家</my-btn>
      </view>
    </view>


  </view>
</template>

<script>
  import status from './components/order-status.vue'
  export default {
    components: {
      status
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .order-card {
    background: #fff;
    border-radius: 36rpx;
    padding: 24rpx;
    margin: 24rpx 0;

    .top {
      display: flex;
      align-items: center;

      .name {
        font-size: 26rpx;
        width: 560rpx;
        padding: 0 16rpx;
      }
    }

    .items {
      padding-top: 24rpx;

      .item {
        padding-bottom: 24rpx;
        display: flex;
        justify-content: space-between;
      }

      .pic {
        width: 100rpx;
        height: 100rpx;
        object-fit: cover;
        background: #e3dbda;
        border-radius: 8rpx;
      }

      .info {
        width: 530rpx;
      }

      .name {
        font-size: 28rpx;
      }

      .price {
        color: #999999;
        font-size: 24rpx;
      }
    }

    .info {
      font-size: 24rpx;
      color: #A6A6A6;

      .on {
        color: #FF511B;
      }

      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6rpx 0;
      }
    }
  }
  
  .peisong-card {
    width: 702rpx;
    height: 222rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  
  .hexiao-card {
    width: 702rpx;
    height: 240rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .info-card {
    background: #fff;
    border-radius: 36rpx;
    padding: 24rpx;
    margin: 24rpx 0;
    font-size: 24rpx;
    color: #A6A6A6;

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6rpx 0;
    }
  }

  .pay-btns {
    padding: 24rpx 8rpx;
    letter-spacing: 1px;

    .left {
      width: 476rpx;
      height: 80rpx;
      background: #3F3F3F;
      box-shadow: 1rpx 4rpx 7rpx 1rpx rgba(85, 68, 63, 0.2);
      border-radius: 40rpx 0rpx 0rpx 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      color: #fff;
      padding: 0 32rpx;

      .lg {
        font-size: 28rpx;
      }
    }

    .right {
      width: 196rpx;
      height: 80rpx;
      background: linear-gradient(90deg, #ff842b 0%, #ff5f34 100%);
      box-shadow: 1rpx 4rpx 7rpx 1rpx rgba(85, 68, 63, 0.2);
      border-radius: 0rpx 40rpx 40rpx 0rpx;
      font-size: 30rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
